<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>
<%@ include file="/common/common-css.v2.jsp"%>
<script>
		cmdList = "/statMallProject/queryList.action";
</script>
<style>
#jquery-table td {
	cursor: pointer !important;
	word-break: break-all;
	word-wrap: break-word;
}

.load_bg {
	background: #000;
	opacity: 0.1;
	left: 0px;
	top: 0px;
	position: fixed;
	height: 100%;
	width: 100%;
	overflow: hidden;
	z-index: 10000;
}

.load_img {
	left: 50%;
	top: 180px;
	position: fixed;
	height: 50px;
	overflow: hidden;
	z-index: 20000;
}

a.check {
	margin-bottom: 10px;
}

@media ( min-width : 768px) and (max-width: 1200px) {
	.backup-text {
		width: 100px !important;
	}
}
</style>
</head>
<body class="no-skin">
	<div class="load_bg" style="display: none;"></div>
	<img src="http://img.xmiles.cn/commentloading.gif" class="load_img"
		style="display: none" />
	<div class="page-content">
		<div id="test"></div>
		<form id="queryForm">
			<div class="page-content-area">
				<div class="row">
					<div class="col-sm-12">
						<div class="widget-box"
							style="border: 0px solid #ccc; border-top: none; border-bottom: none;">
							<div class="widget-header widget-header-blue widget-header-flat">
								<h4 class="widget-title">选择条件进行查询</h4>

								<div class="widget-toolbar">
									<a href="#" data-action="collapse"> <i
										class="ace-icon fa fa-chevron-up"></i>
									</a>
								</div>
							</div>

							<div class=" widget-body">
								<div class="widget-main" id="condition">
								
									<div class="form-group col-xs-12 col-sm-4 col-md-3 col-lg-3">
										<label class="col-sm-2 control-label"  style="text-align:right"  for="startTime">时间:</label>
										<div class="col-sm-6">
											<div class="input-daterange input-group col-sm-12">
												<input type="text" data-date-format="yyyy-mm-dd hh:ii" class="fromDate date-picker input-sm form-control" style="padding-left:0px" name="startTime">
												<span class="input-group-addon" style="width:6px">
													<i class="fa fa-exchange"></i>
												</span>
												<input type="text" data-date-format="yyyy-mm-dd hh:ii" class="endDate date-picker input-sm form-control" style="padding-left:0px" name="endTime">
											</div>
										</div>
									</div>
								
									<div class="form-group col-xs-12 col-sm-4">
										<label class="col-sm-2 control-label"  style="text-align:right" >商品ID：</label>
										 <div class="col-sm-4">
											<div class="input-daterange input-group col-sm-12">
												<input type="text" class="input-sm form-control" style="padding-left:0px" name="itemId" />
											</div>
										</div>
									</div>
									
									<div class="form-group col-xs-12 col-sm-4">
										<label class="col-sm-2 control-label"  style="text-align:right" >商品名称：</label>
										 <div class="col-sm-4">
											<div class="input-daterange input-group col-sm-12">
												<input type="text" class="input-sm form-control" style="padding-left:0px" name="itemName" />
											</div>
										</div>
									</div>
									
									<div class="form-group col-xs-12 col-sm-4">
										<label class="col-sm-2 control-label"  style="text-align:right" >页面：</label>
										 <div class="col-sm-4">
											<div class="input-daterange input-group col-sm-12">
												<select id="page" name="page" class="form-control">
													<option value="0">请选择</option>
													<option value="" selected="selected">全部</option>
												</select>
											</div>
										</div>
									</div>
									
									<div class="form-group col-xs-12 col-sm-4">
										<label class="col-sm-2 control-label"  style="text-align:right" >模块：</label>
										 <div class="col-sm-4">
											<div class="input-daterange input-group col-sm-12">
												<select id="module" name="module" class="form-control">
													<option value="0">请选择</option>
													<option value="" selected="selected">全部</option>
												</select>
											</div>
										</div>
									</div>
									
									<div class="form-group col-xs-12 col-sm-4">
										<label class="col-sm-2 control-label"  style="text-align:right" >位置：</label>
										 <div class="col-sm-4">
											<div class="input-daterange input-group col-sm-12">
												<select id="position" name="position" class="form-control">
													<option value="1">请选择</option>
													<option value="" selected="selected">全部</option>
												</select>
											</div>
										</div>
									</div>
									
									<div class="form-group col-xs-12 col-sm-4">
										<label class="col-sm-2 control-label"  style="text-align:right" >平台：</label>
										 <div class="col-sm-4">
											<div class="input-daterange input-group col-sm-12">
												<select id="platform" name="platform" class="form-control">
													<option value="" selected="selected">全部</option>
													<option value="android">android</option>
													<option value="ios">ios</option>
													<option value="-">未知</option>
												</select>
											</div>
										</div>
									</div>
									
									<div class="form-group col-xs-12 col-sm-4">
										<label class="col-sm-2 control-label"  style="text-align:right" >产品：</label>
										 <div class="col-sm-4">
											<div class="input-daterange input-group col-sm-12">
												<s:select name="prodId" id="prodId" list="%{paramsMap.prodList}" listKey="prdid" 
													listValue="name" headerKey="" headerValue="全部" 
													cssClass="form-control"></s:select>
											</div>
										</div>
									</div>
									
									<div class="form-group col-xs-12 col-sm-4">
										<label class="col-sm-2 control-label"  style="text-align:right" >渠道：</label>
										 <div class="col-sm-4">
											<div class="input-daterange input-group col-sm-12">
												<s:select name="channel" id="channel" list="%{paramsMap.channelList}" listKey="channel_code" 
													listValue="channel_name" headerKey="" headerValue="全部" 
													cssClass="form-control"></s:select>
											</div>
										</div>
									</div>
									
									<div class="form-group col-xs-12 col-sm-4">
										<label class="col-sm-2 control-label"  style="text-align:right" >用户类型：</label>
										 <div class="col-sm-4">
											<div class="input-daterange input-group col-sm-12">
												<select id="userType" name="userType" class="form-control">
													<option value="" selected="selected">全部</option>
													<option value="new">新用户</option>
												</select>
											</div>
										</div>
									</div>
											
								</div>
								<!-- /.widget-main -->
							</div>
							<!-- /.widget-body -->
						</div>
						<!-- /.widget-box -->
					</div>
					<!-- /.col-sm-12 -->
					<div class="col-md-12 center">
						<div class="clearfix form-actions myaction">

							<button class="btn btn-purple  no-border" type="button"
								name="btn-query" onclick="query_any()">
								<i class="ace-icon fa fa-search icon-on-right bigger-110"></i>
								查询
							</button>
						</div>
					</div>
				</div>
				<!-- /.row -->
				
				<div class="row">
					<div class="col-xs-12">
						<a id="loadButton" href="javascript:void(0)"
							class="btn btn-success btn-small" style="display: none"
							id="output2" onclick="loadlist()">导出CSV</a>&nbsp;&nbsp;&nbsp;
					</div>
				</div>

				<div class="row">
					<div class="col-xs-12">
						<table id="jquery-table"
							class="table table-striped table-bordered table-hover">
						</table>
					</div>
					<!-- /.col -->
				</div>
				<!-- /.row -->

			</div>
			<!-- /.page-content-area -->
		</form>
	</div>
	<!-- /.page-content -->

<%@ include file="/common/common-js.jsp"%>
<script type="text/javascript" src="${ctx}/js/call_func.js"></script>


<script type="text/javascript">

	function loadlist(){
		var form = document.forms["queryForm"];
		form.action= ctx+"/statMallProject/downloadList.action?"; 
		form.submit();
	}


	//接受URL参数，进行文档写入
	function getQueryString(name) {
		var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
		var r = window.location.search.substr(1).match(reg);
		if (r != null)
			return decodeURI(r[2]);
		return null;
	}

	//【查询】按钮Click事件
	function query_any() {
		$("#loadButton").show();
		$("#output").removeAttr("style");
		$(".load_bg").removeAttr("style");
		$(".load_img").removeAttr("style");
		if(jqTable != null){
			jqTable.fnDraw();
		} else{
			loaddata();
		}
		$("#delete_btn").attr("style","display:block");
		$("#delete_hr").attr("style","margin-top:0px;margin-bottom:20px;display:block");
	}

	var jqTable = null;
	var loaddata = function() {
		jQuery(function($) {
			jqTable = $('#jquery-table').dataTable({
				//数据列控制（包括对应返回JSON属性名称，对应表头列索引位置、数据转换封装等）
				"columnDefs" : [
						{
							"title" : '时间',
							"targets" : [ 0 ],
							"data" : 'time',
							"class" : "center",
							"bSortable" : false,
							"width" : "50px",
						},
						{
							"title" : '平台',
							"targets" : [ 1 ],
							"data" : "platform",
							"class" : "center",
							"bSortable" : false,
							"width" : "50px",
						},
						{
							"title" : '产品',
							"targets" : [ 2 ],
							"data" : "prodName",
							"class" : "center",
							"bSortable" : false,
							"width" : "50px"
						},
						{
							"title" : '渠道',
							"targets" : [ 3 ],
							"data" : "channelName",
							"class" : "center",
							"bSortable" : false,
							"width" : "50px"
						},
						{
							"title" : '用户类型',
							"targets" : [ 4 ],
							"data" : "user_type",
							"class" : "center",
							"bSortable" : false,
							"width" : "50px"
						},
						{
							"title" : '页面',
							"targets" : [ 5 ],
							"data" : "page",
							"class" : "center",
							"bSortable" : false,
							"width" : "50px"
						},
						{
							"title" : '模块',
							"targets" : [ 6 ],
							"data" : "module",
							"class" : "center",
							"bSortable" : false,
							"width" : "50px"
						},
						{
							"title" : '位置',
							"targets" : [ 7 ],
							"data" : "position",
							"class" : "center",
							"bSortable" : false,
							"width" : "50px"
						},
						{
							"title" : '商品名称',
							"targets" : [ 8 ],
							"data" : "item_name",
							"class" : "center",
							"bSortable" : false,
							"width" : "50px"
						},
						{
							"title" : '商品ID',
							"targets" : [ 9 ],
							"data" : "item_id",
							"class" : "center",
							"bSortable" : false,
							"width" : "50px"
						},
						{
							"title" : '商品pv',
							"targets" : [ 10 ],
							"data" : "item_pv",
							"class" : "center",
							"bSortable" : false,
							"width" : "50px"
						},
						{
							"title" : '商品uv',
							"targets" : [ 11 ],
							"data" : "item_uv",
							"class" : "center",
							"bSortable" : false,
							"width" : "50px"
						}],
				"sAjaxSource": ctx + cmdList + "?rand=" + Math.random(),//数据源URL
				"fnServerData" : function(sSource, aoData,fnCallback) {
					var data = $('#queryForm').serializeObject();
					data.aoData = JSON.stringify(aoData);
					$.ajax({
						"type" : "POST",
						"dataType" : 'json',
						"url" : sSource,
						"data" : data,
						"success" : function(resp) {
							fnCallback(resp);
							initListPage();
						},
						"error" : function(XMLHttpRequest,
								textStatus, errorThrown) {
						},
						"complete" : function() {
							$(".load_bg,.load_img").hide();
						}
					});
				},

				"sScrollXInner" : "100%",
				"sScrollY" : "100%",//如果不设置，IE会有问题
				"aaSorting" : [ [ 0, "asc" ] ] //初始化加载，默认按第几列排序、排序方式（列从0开始计算）
			});
		});
	};

	/* jQuery(function($) {
		$("#channelList").combobox();
		//进入页面就自动查询并渲染列表			
		loaddata();
	}); */
	
	
</script>

</body>
</html>